<template>
  <ContainerGroup>
    <Container>
      <FilterForm
        ref="filterFormTop"
        :elements="topFilters"
        style="margin-bottom:10px;"
        @submit="handleTopSearch"
        @reset="handlerTopReset"
      >
        <Button type="info" :loading="dcLoading" icon="export" @click="handleExport">导出</Button>
      </FilterForm>
      <Table
        :columns="table1Columns"
        :loading="table1Loading"
        :data="[table1Data.high]"
        style="height:120px;"
      >
        <template #startMoney="{row}">{{ row&&row.startMoney | numberToCurrency }}</template>
        <template #projectMoney="{row}">{{ row&&row.projectMoney | numberToCurrency }}</template>
        <template #income="{row}">{{ row&&row.income | numberToCurrency }}</template>
        <template #payAllMoney="{row}">{{ row&&row.payAllMoney | numberToCurrency }}</template>
        <template #surplusMoney="{row}">{{ row&&row.surplusMoney | numberToCurrency }}</template>
      </Table>
      <Table
        :columns="table2Columns"
        :loading="table2Loading"
        :data="[table1Data.down]"
        style="height:120px;"
      >
        <template #income="{row}">{{ row&&row.income | numberToCurrency }}</template>
        <template #equipmentMoney="{row}">{{ row&&row.equipmentMoney | numberToCurrency }}</template>
        <template #meetingMoney="{row}">{{ row&&row.meetingMoney | numberToCurrency }}</template>
        <template #peopleMoney="{row}">{{ row&&row.peopleMoney | numberToCurrency }}</template>
        <template #travelMoney="{row}">{{ row&&row.travelMoney | numberToCurrency }}</template>
        <template #materialMoney="{row}">{{ row&&row.materialMoney | numberToCurrency }}</template>
        <template #elseMoney="{row}">{{ row&&row.elseMoney | numberToCurrency }}</template>
        <template #labourServiceMoney="{row}">{{ row&&row.labourServiceMoney | numberToCurrency }}</template>
        <template #knowMoney="{row}">{{ row&&row.knowMoney | numberToCurrency }}</template>
      </Table>
    </Container>
    <Container height="fill" display="flexY">
      <FilterForm
        ref="filterForm"
        :elements="bottomFilters"
        @submit="handleSearch"
        @reset="handlerReset"
      />
      <div style="margin:10px 0px;">合计：{{ allMoney | numberToCurrency }}</div>
      <Table
        :columns="tableNewColumns"
        :loading="tableLoading"
        :data="tableData"
        :pagination="{
          total: total,
          current: currentPage,
          pageSize: pageSize,
        }"
        @paginationChange="pageChange"
      >
        <template #yard="{row}">{{ row.yard===1?'三香':'浒关' }}</template>

        <template #balance="{row}">
          <div class="row-s">
            {{ row.balance | numberToCurrency }}
            <Tooltip
              v-if="row.remarks"
              icon="warning"
              type="warning"
              :content="row.remarks"
              style="margin-left:6px;font-size:16px;"
            />
          </div>
        </template>
        <template #caozuo="{row}">
          <Tooltip content="申诉" icon="tickets" @click="handleAppeal(row)" />
        </template>
      </Table>
      <!-- 申诉 -->
      <Dialog
        title="添加申诉"
        :visible="dialogVisible"
        :footer-btns="[
          {
            text: '取消',
            type: 'info',
            trigger: 'cancel'
          },{
            text: '提交',
            type: 'primary',
            trigger: 'confirm',
            loading: btnLoading
          }]"
        @confirm="handleConfirm"
        @cancel="dialogVisible=false"
      >
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          size="mini"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="科目编码：">{{ ruleForm.accountCode }}</el-form-item>
          <el-form-item label="科目名称：">{{ ruleForm.accountName }}</el-form-item>
          <el-form-item label="费用类别：">{{ ruleForm.expenseTypeName }}</el-form-item>
          <el-form-item label="摘要：">{{ ruleForm.description }}</el-form-item>
          <el-form-item label="余额(元)：">{{ ruleForm.balance }}</el-form-item>
          <el-form-item label="日期：">{{ ruleForm.operDtime }}</el-form-item>
          <el-form-item label="凭证号数：">{{ ruleForm.accountNum }}</el-form-item>
          <el-form-item label="备注：">
            <el-input v-model="ruleForm.remarks" placeholder="请输入备注" maxlength="50" />
          </el-form-item>
        </el-form>
      </Dialog>
    </Container>
  </ContainerGroup>
</template>
<script>
import {
  getEntryByDictId,
  saveProjectAppeal
} from '@/apis/specialFunds/systermSetting'
export default {
  name: 'DeleteJournal', // 删除日志
  props: {
    pageType: Number,
    tableApi: Array,
    xptApi: Function,
    currentRow: Object,
    time: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      btnLoading: false,
      allMoney: 0,
      ruleForm: {
        accountCode: '',
        accountName: '',
        expenseTypeName: '',
        description: '',
        balance: '',
        operDtime: '',
        accountNum: '',
        remarks: ''
      },
      dialogVisible: false,
      dcLoading: false,
      topFilters: [
        {
          key: 'yearMonth',
          label: '时间',
          mode: 'monthrange',
          type: 'date-picker',
          format: 'yyyy-MM',
          value: [],
          defaultValue: ['2019-01', this.$util.currentDate(0)],
          width: 340
        }
      ],
      bottomFilters: [
        {
          key: 'accountCode',
          type: 'input',
          label: '科目编码',
          value: ''
        },
        {
          key: 'accountName',
          type: 'input',
          label: '科目名称',
          value: ''
        },
        {
          key: 'expenseTypeCode',
          type: 'Select',
          label: '费用类别',
          value: '',
          width: 210,
          itemLabel: 'entryName',
          itemValue: 'entryCode',
          options: [],
          filterable: true,
          clearable: true
        },
        {
          key: 'reExTypeCode',
          type: 'Select',
          label: '收支类型',
          value: '',
          width: 210,
          itemLabel: 'entryName',
          itemValue: 'entryCode',
          options: [],
          filterable: true,
          clearable: true
        }
      ],
      table1Columns: [
        {
          title: '财务编码',
          dataIndex: 'financialCode',
          width: 130
        },
        {
          title: '项目编号',
          dataIndex: 'projectCode',
          width: 130
        },
        {
          title: '项目负责人',
          dataIndex: 'userName',
          width: 130
        },
        {
          title: '项目简称',
          dataIndex: 'easyProName'
        },
        {
          title: '项目全称',
          dataIndex: 'proAllName'
        },
        {
          title: '期初金额',
          dataIndex: 'startMoney',
          type: 'otherTag'
        },
        {
          title: '配套经费',
          dataIndex: 'projectMoney',
          type: 'otherTag'
        },
        {
          title: '收入',
          dataIndex: 'income',
          type: 'otherTag'
        },
        {
          title: '支出总额',
          dataIndex: 'payAllMoney',
          type: 'otherTag'
        },
        {
          title: '项目余额',
          dataIndex: 'surplusMoney',
          type: 'otherTag'
        }
      ],
      table1Loading: false,
      table1Data: {},
      table2Columns: [
        {
          title: '设备费',
          dataIndex: 'equipmentMoney',
          type: 'otherTag'
        },
        {
          title: '会议费',
          dataIndex: 'meetingMoney',
          type: 'otherTag'
        },
        {
          title: '人工费',
          dataIndex: 'peopleMoney',
          type: 'otherTag'
        },
        {
          title: '差旅费',
          dataIndex: 'travelMoney',
          type: 'otherTag'
        },
        {
          title: '材料费',
          dataIndex: 'materialMoney',
          type: 'otherTag'
        },
        {
          title: '其他支出',
          dataIndex: 'elseMoney',
          type: 'otherTag'
        },
        {
          title: '劳务费',
          dataIndex: 'labourServiceMoney',
          type: 'otherTag'
        },
        {
          title: '出版/文献/信息传播/知识产权',
          dataIndex: 'knowMoney',
          width: 200
        },
        {
          title: '其他分类',
          dataIndex: 'otherCategory',
          width: 200
        }
      ],
      table2Loading: false,
      table2Data: [],
      tableColumns: [
        {
          title: '日期',
          dataIndex: 'operDtime'
        },
        {
          title: '凭证号数',
          dataIndex: 'accountNum'
        },
        {
          title: '科目编码',
          dataIndex: 'accountCode'
        },
        {
          title: '科目名称',
          dataIndex: 'accountName'
        },
        {
          title: '费用类别',
          dataIndex: 'expenseTypeName'
        },
        {
          title: '收支类型',
          dataIndex: 'reExTypeName'
        },
        {
          title: '摘要',
          dataIndex: 'description'
        },
        {
          title: '余额(元)',
          dataIndex: 'balance',
          type: 'otherTag'
        },
        {
          title: '院区',
          width: 160,
          type: 'otherTag',
          dataIndex: 'yard'
        }
        // {
        //   title: '操作时间',
        //   width: 160,
        //   type: 'otherTag',
        //   dataIndex: 'caozuo'
        // }
      ],
      // this.pageType === 2
      //     ? {
      //       title: '操作时间',
      //       width: 160,
      //       type: 'otherTag',
      //       dataIndex: 'caozuo'
      //     }
      //     : ''
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableLoading: false,
      tableData: [],
      newCondition: {},
      newTopCondition: null,
      rowValue: null
    }
  },
  computed: {
    tableNewColumns() {
      let table = this.tableColumns
      if (this.pageType === 2) {
        table = [
          ...this.tableColumns,
          {
            title: '操作',
            width: 160,
            type: 'otherTag',
            dataIndex: 'caozuo'
          }
        ]
      }
      return table
    }
  },
  created() {
    this.getSelect(2, 1002) // 费用类别
    this.getSelect(3, 1003) // 收支类型
    this.injectTime()
  },
  methods: {
    injectTime() {
      const target = this.topFilters.find(i => i.key === 'yearMonth')
      target.value = [...this.time]
    },
    getSelect(type, code) {
      getEntryByDictId(code).then(res => {
        if (res.data.code === 200) {
          this.bottomFilters[type].options = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handleConfirm() {
      console.log('this.rowValue', this.rowValue)
      const param = {
        accountCode: this.rowValue.accountCode,
        accountName: this.rowValue.accountName,
        accountNum: this.rowValue.accountNum,
        financeCode: this.currentRow?.financialCode,
        projectCode: this.currentRow?.projectCode,
        projectEasyName: this.currentRow?.easyProName,
        remarks: this.ruleForm.remarks,
        accountId: this.rowValue.accountId
      }
      this.btnLoading = true
      saveProjectAppeal(param).then(res => {
        this.btnLoading = false
        if (res.data.code === 200) {
          this.dialogVisible = false
          this.$message.success(res.data.message)
          this.getData()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handleAppeal(row) {
      // 项目查询-申诉
      this.rowValue = row
      this.dialogVisible = true
      this.setFormDetails(row)
    },
    setFormDetails(row) {
      this.ruleForm = row
      for (const key in this.ruleForm) {
        if (this.ruleForm[key]) {
          this.ruleForm[key] = row[key]
        }
      }
    },
    handleExport() {
      // 导出
      const param = {
        financialCode: this.currentRow?.financialCode,
        startTime: this.$refs.filterFormTop.getParms()?.yearMonth[0] + '-01',
        endTime: this.$refs.filterFormTop.getParms()?.yearMonth[1] + '-01',
        accountCode: this.$refs.filterForm.getParms()?.accountCode,
        accountName: this.$refs.filterForm.getParms()?.accountName,
        expenseTypeCode: this.$refs.filterForm.getParms()?.expenseTypeCode,
        reExTypeCode: this.$refs.filterForm.getParms()?.reExTypeCode
      }
      this.dcLoading = true
      this.xptApi(param).then(res => {
        this.dcLoading = false
        const blob = new Blob([res.data], {
          type: res.data.type + 'charset=utf-8'
        })
        const downloadLink = document.createElement('a')
        const URL = window.URL || window.webkitURL || window.moxURL
        const downUrl = URL.createObjectURL(blob)
        downloadLink.href = downUrl
        downloadLink.download = '项目收支明细.xlsx'
        downloadLink.click()
        window.URL.revokeObjectURL(downUrl)
        // document.body.removeChild(downloadLink) // 删除 a 标签
      })
    },
    handleTopSearch(value) {
      this.newTopCondition = value
      this.getTopData()
    },

    getTopData() {
      const params = {
        financialCode: this.currentRow?.financialCode,
        startTime: this.newTopCondition?.yearMonth[0] + '-01',
        endTime: this.newTopCondition?.yearMonth[1] + '-01'
      }
      this.table1Loading = true
      this.tableApi[1](params)
        .then(res => {
          this.table1Loading = false
          if (res.data.code === 200) {
            this.table1Data = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    handlerTopReset(value) {},
    handleSearch(value) {
      this.newCondition = value
      this.currentPage = 1
      this.getData()
    },
    getData() {
      const params = {
        financialCode: this.currentRow?.financialCode,
        accountCode: this.newCondition?.accountCode,
        accountName: this.newCondition?.accountName,
        expenseTypeCode: this.newCondition?.expenseTypeCode,
        reExTypeCode: this.newCondition?.reExTypeCode,
        startTime: this.$refs.filterFormTop.getParms()?.yearMonth[0] + '-01',
        endTime: this.$refs.filterFormTop.getParms()?.yearMonth[1] + '-01',
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }
      this.tableLoading = true
      this.tableApi[0](params)
        .then(res => {
          this.tableLoading = false
          if (res.data.code === 200) {
            this.tableData = res.data.data.pageInfo.list
            this.total = res.data.data.pageInfo.total
            this.allMoney = res.data.data.sumMoney
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    handlerReset(val) {
      this.handleSearch()
    },
    pageChange(payload) {
      this.currentPage = payload.current
      this.pageSize = payload.pageSize
      this.getData()
    }
  }
}
</script>
<style lang="less" scoped>
.row-s {
  display: flex;
  align-items: center;
}
/deep/.ck-dialog-container {
  top: -5vh !important;
}

.demo-ruleForm {
  width: 400px;
}
</style>
